<template>
  <div>
    <h1>慰问金申请</h1>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="department">申请部门:</label>
        <input type="text" id="department" v-model="form.department" required />
      </div>
      <div class="form-group">
        <label for="handler">经办人:</label>
        <input type="text" id="handler" v-model="form.handler" required />
      </div>
      <div class="form-group">
        <label for="payee">收款人:</label>
        <input type="text" id="payee" v-model="form.payee" required />
      </div>
      <div class="form-group">
        <label for="bank">开户行:</label>
        <input type="text" id="bank" v-model="form.bank" required />
      </div>
      <div class="form-group">
        <label for="account">账号:</label>
        <input type="text" id="account" v-model="form.account" required />
      </div>
      <div class="form-group">
        <label for="amountInWords">付款金额大写:</label>
        <input type="text" id="amountInWords" v-model="form.amountInWords" required />
      </div>
      <div class="form-group">
        <label for="amountInNumbers">付款金额小写:</label>
        <input type="text" id="amountInNumbers" v-model="form.amountInNumbers" required />
      </div>
      <div class="form-group">
        <label for="reason">付款事由:</label>
        <input type="text" id="reason" v-model="form.reason" required />
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  department: '',
  handler: '',
  payee: '',
  bank: '',
  account: '',
  amountInWords: '',
  amountInNumbers: '',
  reason: ''
});

const submitForm = () => {
  // 在这里添加提交表单的逻辑
  console.log('Form submitted:', form.value);
  // 例如，发送到服务器或调用API
};
</script>

<style scoped>
h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

form {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #555;
  font-weight: bold;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}

button {
  width: 100%;
  padding: 12px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

/* 优化输入框和按钮的焦点样式 */
input:focus,
button:focus {
  outline: 2px solid #0056b3;
  background-color: #f0f0f0;
}

/* 响应式设计 */
@media (max-width: 600px) {
  form {
    width: 90%;
    margin: 20px auto;
  }
}
</style>